<template>
  <div v-for="(item, index) in codeList.code"
    :key="index"
    :id="'__' + item.id"
    style="padding:2px;height: 30px;width: 400px;"
  >
    <span>{{item.id}}</span> 
    <span style="float: right;">
      <el-button :type="(index===codeIndex)?'primary':''" @click="myedit(index)">编辑</el-button>
      <el-button type="" @click="mydelete(index)">删除</el-button>
    </span>
  </div>
  <el-button type="" @click="myadd">添加</el-button>

  <hr>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{codeList.code[codeIndex].id}}</span>
      </div>
    </template>
    <code-item
      :code="codeList.code[codeIndex]"
    />
  </el-card>
</template>

<script>
/**
 * 编辑多条可运行的代码，代码不移动 
 */

  import { ref } from 'vue'
  import { ElButton, ElCard } from 'element-plus'
  import codeItem from './code-edit.vue'

</script>

<script setup>
  import { store } from '@naturefw/nf-state'

  const codeList = store.current.docInfo

  const codeIndex = ref(0)

  // 添加新数组
  const myadd = () => {
    codeList.code.push({
      id: '新代码段' + codeList.code.length,
      js: '',
      template: '',
      style: ''
    })
    codeIndex.value = codeList.code.length - 1
  }

  // 删除
  const mydelete = (index) => {
    codeList.code.splice(index, 1)
  }
  // 修改
  const myedit = (index) => {
    codeIndex.value = index
  }

</script>